<template>
  <div>
    <el-table ref="singleTable" :data="tickerData" highlight-current-row @current-change="handleCurrentChange"
               style="width: 100%" :row-style="{height:'50px'}" height="200">
      <!--:show-header="false"-->
      <el-table-column property="name" width="180" style="font-size: 30px" label="币种">
        <template slot-scope='scope'>
          <span style="font-weight: bold">{{ scope.row.market }}</span>
        </template>
      </el-table-column>

      <el-table-column property="price" width="100" label="价格">
        <template slot-scope='scope'>
          <span style="font-weight: bold">{{ '$' + scope.row.last }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-tabs type="border-card" class="tabs" :stretch="true">
      <el-tab-pane label="买入">
        <DealAsideForm type="buy"></DealAsideForm>
      </el-tab-pane>
      <el-tab-pane label="卖出">
        <DealAsideForm type="sell"></DealAsideForm>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import DealAsideForm from "./DealAsideForm"
  import {tickerAll} from '@/api/modules/ticker'

  export default {
    name: "DealAside",
    components: {DealAsideForm},
    data() {
      return {
        currentRow: null,
        tickerData: []
      }
    },
    created() {
      this.getTrans()
    },
    methods: {
      handleCurrentChange(val) {
        console.log("val", val)
        this.currentRow = val;
        this.$refs.singleTable.setCurrentRow(val);

        this.$nextTick(() => {
          this.$emit('changeCurrency', val.market)
        })

      },
      tableRowStyle({row, rowIndex}) {
        return `background-color: #004346;color: #fff;`
      },
      getTrans() {
        tickerAll().then(res => {
          this.tickerData = res.data
          console.log("res", res)
        })
      }
    }

  }
</script>

<style lang="scss" scoped>
  .tabs {
    width: 100%;
    /*height: 680px;*/
    text-align: left;
    background: transparent;
    border: 0px solid white;
  }

</style>
